<template>
    <div>
        <!-- 直播课 -->
        <div class="course-live-online-container">
            <!-- 左侧 -->
            <div class="online-left">
                <!-- 标题行 -->
                <div class="online-title-line">
                    <!-- 标题 -->
                    <div class="title-box">
                        <img src="@/assets/images/tv.png" alt="">
                        <div>直播课程</div>
                        <div>互联网大佬在线直播</div>
                    </div>
                    <!-- 切换 -->
                    <div class="change-box">
                        <img src="@/assets/images/last-btn.png" alt="">
                        <img src="@/assets/images/next-btn.png" alt="">
                    </div>
                </div>
                <!-- 直播课程 -->
                <div class="online-left-main container-fluid">
                    <div class="row">
                        <div class="col-lg-6" v-for="(item) in liveCourseList" :key="item.courseId">
                            <div class="live-content-box">
                                <div class="img-container">
                                    <img :src="item.course.coverFileUrl" alt="">
                                </div>
                                <div class="live-title"> {{ item.course.courseTitle }} </div>
                                <div class="live-status">
                                    <img src="@/assets/images/对勾中.svg" alt="">
                                    直播结束
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="online-right">
                <!-- 标题 -->
                <div class="online-right-title">
                    <img src="@/assets/images/star.png" alt="">
                    <div>课程榜单</div>
                    <div>以购买、学习相关数据为依据～每日更新</div>
                </div>
                <!-- 主体 -->
                <div class="online-right-main">
                    <img src="@/assets/images/bestseller-list.23c00d98.png" alt="">
                    <!--课程  -->
                    <div class="course-box">
                        <div v-for="(item, index) in sellingBestCourseList" :key="item.courseId">
                            <div class="course" v-if="(index <= maxIndex) && (index >= minIndex)">
                                <div class="course-rank"
                                    :class="{ 'color1': index == 0, 'color2': index == 1, 'color3': index == 2 }">NO.{{ index + 1 }}
                                </div>
                                <div class="img-box">
                                    <img :src="item.bannerFileUrl" alt="">
                                </div>
                                <div class="course-info">
                                    <div class="course-title"> {{ item.courseTitle }} </div>
                                    <div class="course-price"> ￥{{ item.coursePrice }} </div>
                                    <div class="course-study-num"> {{ item.participationsCount }} 人报名 </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- 切换按钮 -->
                    <div class="change-box">
                        <button class="change-btn" @click="changeRank">换一换</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getLiveCourseInfo, getSellingBestCourseInfo } from '@/api/request'
import 'bootstrap/dist/css/bootstrap.css'

export default {
    name: 'LiveCourse',
    data() {
        return {
            liveCourseList: [],
            sellingBestCourseList: [],
            maxIndex: 2,
            minIndex: 0,

        }
    },
    methods: {
        changeRank() {
            this.maxIndex = this.maxIndex + 3;
            if (this.maxIndex > 8)
                this.maxIndex = this.maxIndex % 9;
            this.minIndex = this.minIndex + 3;
            if (this.minIndex > 6)
                this.minIndex = this.minIndex % 9;
        },
    },
    created() {
        getLiveCourseInfo(1, 4).then((result) => {
            this.liveCourseList = result.rows;
        }).catch((err) => {
            console.log(err);
        });
        getSellingBestCourseInfo().then((result) => {
            this.sellingBestCourseList = result.data;
            console.log('sellingBestCourseInfo', this.sellingBestCourseList);
        }).catch((err) => {
            console.log(err);
        });
    }

}
</script>


<style lang="less" scoped>
.course-live-online-container {
    width: 1160px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    .online-left {
        width: 59%;
        border-radius: 20px;
        background: #fff;
        padding: 30px 20px;

        .online-title-line {
            display: flex;
            justify-content: space-between;
            height: 40px;
            // background-color: #dec6af;

            .title-box {
                display: flex;
                justify-content: space-between;

                img {
                    height: 35px;
                    margin-right: 10px;
                }

                div:nth-child(2) {

                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    font-size: 26px;
                    color: #333;
                    margin-right: 10px;
                }

                div:nth-child(3) {
                    margin-top: auto;
                    margin-bottom: 5px;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #9f9f9f;

                }
            }

            .change-box {
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 20px;
                    margin-right: 10px;
                }
            }
        }

        .online-left-main {
            .live-content-box {
                margin-top: 10px;
                padding: 10px 0;
                padding-top: 0;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);
                text-shadow: 0 4px 10px rgba(0, 0, 0, .15);
                // background-color: #9f9f9f;
                border-radius: 10px;


                >.img-container {
                    border-radius: 10px 10px 0 0;
                    overflow: hidden;

                    >img {
                        width: 100%;
                        height: 180px;
                        border-radius: 10px 10px 0 0;
                        transition: transform 0.3s ease; // 添加过渡动画

                        &:hover {
                            transform: scale(1.1); // 放大5%（可按需调整比例）

                        }
                    }
                }


                .live-title {
                    padding: 15px 0 10px 0;
                    margin-left: 20px;
                    font-size: 14px;
                    font-weight: 600;
                    color: #333;
                }

                .live-status {
                    color: #bac2c2;
                    padding-bottom: 15px;
                    margin-left: 20px;
                    text-shadow: 0 4px 10px rgba(0, 0, 0, .15);
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    display: flex;

                    align-items: center;

                    img {
                        width: 20px;
                    }
                }
            }
        }
    }

    .online-right {
        width: 39%;
        padding: 10px 20px;
        border-radius: 20px;
        background: #fff;

        >.online-right-title {
            margin-top: 20px;
            // background-color: #9f9f9f;

            display: flex;
            justify-content: space-between;
            align-items: center;

            >div:nth-child(2) {
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                font-size: 26px;
                color: #333;
            }

            >div:nth-child(3) {
                margin-bottom: 5px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #9f9f9f;
                // background-color: #1ab792;
            }
        }

        >.online-right-main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-bottom: 40px;
            margin-top: 40px;
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
            border-radius: 20px;

            >.course-box {
                padding: 20px;
                align-items: center;
            }

            >img {
                width: 140px;
                height: 60px;
                margin: 0 auto;
                margin-top: -40px;
            }



            .change-btn {

                margin-top: 20px;

                width: 108px;
                height: 29px;
                background: linear-gradient(90deg, #fd952d, #f1534b);
                border-radius: 15px;
                color: #fff;
                font-weight: 500;
                border: none;
                cursor: pointer;
            }

        }
    }
}

.course {
    display: flex;
    position: relative;
    margin: 10px;
    margin-bottom: 30px;
    width: 352px;

    >.img-box {
        width: 170px;
        height: 100px;
        border-radius: 10px;
        margin-right: 12px;
        overflow: hidden;
        transition: transform 0.5s ease-out; // 更自然的缓动效果
        display: block; // 避免行内元素的白边问题

        img {
            width: 170px;
            height: 100px;
            border-radius: 10px;
            transition: transform 0.3s ease; // 添加过渡动画

            &:hover {
                transform: scale(1.1); // 放大5%（可按需调整比例）
            }
        }
    }

    .course-rank {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        // background-color: rgb(252, 139, 51);
        width: 43px;
        height: 20px;
        color: #fff;
        font-size: 12px;
        border-radius: 10px 0 20px 0;
    }

    .course-info {
        width: 182px;
        height: 100px;
    }

    .course-title {
        font-family: PingFangSC-Medium, PingFang SC;
        font-size: 14px;
        font-weight: 500;
        height: 39px;
        margin-bottom: 5px;
        color: #4e5054;
    }

    .course-price {
        color: #f32425;
        font-size: 20px;
        font-weight: 600;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

        line-height: 1.5;
    }

    .course-study-num {
        font-weight: 500;
        color: #b7bbc4;
        font-size: 14px;
    }
}

.color1 {
    background: rgb(252, 139, 51)
}

.color2 {
    background: rgb(193, 182, 177)
}

.color3 {
    background: rgb(235, 77, 134)
}
</style>